<template>
	<view>
		<view class="viewCon">
			<view class="inputView">
				<view class="text_label">
					<text>车牌号</text>
				</view>
				<view class="iptview" @click="handleVeh">
					<u-input class="ipt" readonly v-model="formData.vehCode" placeholder="请输入车牌号"></u-input>
				</view>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>车牌颜色</text>
				</view>
				<view class="iptview" @click="provinceClick(1)">
					<u-input class="ipt" v-model="vehColor" placeholder="请输入车牌颜色" suffixIcon="arrow-down">
					</u-input>
				</view>
			</view>
			<view class="inputView">
				<view class="text_label">
					<text>轨迹时间</text>
				</view>
				<view class="iptview" @click="provinceClick(2)">
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
				</view>
			</view>
		</view>
		<u-picker keyName='name' :show="provinceShow" @cancel="provinceCancel" @confirm="provinceConfirm"
			:columns="provinceList">
		</u-picker>
		<view>
			<u-button style='margin:15px auto;width:80%;' type="primary" size="large" @click="queryClick()">查询
			</u-button>
		</view>
		<u-toast ref="uToast" />
		<selectTaskFy ref="selectTaskFy" @change="changeVeh" />
	</view>
</template>

<script>
	import * as api from '@/common/api/monitor.js'
	import {
		dateFormat
	} from '@/common/util.js'
	import selectTaskFy from '@/components/tool-select/select-task-fy.vue'
	export default {
		components: {
			selectTaskFy
		},
		data() {
			return {
				warningTypeName: '', //码表
				warningType: '', //码表
				inspObjName: "", //企业名称
				provinceShow: false,
				current: 1,
				size: 10,
				provinceList: [],
				formData: {
					vehCode: "",
					vehColor: "",
					startTime: "",
					endTime: "",
				},
				vehColor: '',
				show: false,
				datetimerange: [this.beforeNowtime(4), dateFormat()]
			};
		},
		mounted() {
			this.$api.getDict('plate_color').then(res => {
				res.data.data.map(item => {
					this.provinceList.push({
						id: item.dictKey,
						name: item.dictValue,
					})
				})
				this.provinceList = [this.provinceList]
			})
		},
		methods: {
			changeVeh(res) {
				const item = res.item;
				this.formData.vehCode = item.vehicleNo;
			},
			handleVeh() {
				this.$refs.selectTaskFy.showBox({
					title: "请选择车牌号(至少输入3个字符)",
					key: this.formData.vehCode,
					getData: (key, current) => {
						return new Promise((resolve) => {
							if (key.length < 3) {
								return resolve({});
							}
							api.queryVehicle({
								current,
								size: 20,
								vehNo: key
							}).then(res => {
								const resData = res.data.data;
								resData.records.map(item => {
									item.$label = item.vehicleNo
								})
								resolve(resData);
							}).catch(res => {});
						})
					}
				});
			},

			// 点击查询
			queryClick() {

				this.formData.startTime = this.datetimerange[0]
				this.formData.endTime = this.datetimerange[1]

				api.getPlayBack(this.formData).then(res => {
					if (res.data.code == 200) {
						// this.$emit('eventClick', res.data.data);
						// 		url: '/pages/carMonitor/trackInquire
						this.$goBack('/pages/dgs_hg/carMonitor/trajectoryTracking?tracking=' + JSON.stringify(res.data.data), 2);
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.msg,
						})
					}

				})
			},
			// 补0
			setFormat(x) {
				if (x < 10) {
					x = "0" + x;
				}
				return x;
			},
			//当前时间往前推几个小时
			beforeNowtime(beforetime) {
				var date = new Date(); //日期对象
				date.setHours(date.getHours() - beforetime);
				var now = "";
				now = date.getFullYear() + "-";
				now = now + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
					'-'; //取月的时候取的是当前月-1如果想取当前月+1就可以了
				now = now + this.setFormat(date.getDate()) + " ";
				now = now + this.setFormat(date.getHours()) + ":";
				now = now + this.setFormat(date.getMinutes()) + ":";
				now = now + this.setFormat(date.getSeconds()) + "";
				return now;
			},
			// 轨迹 车牌选择
			provinceClick(key) {
				if (key == 1) {
					this.provinceShow = true
				} else {
					this.show = true
				}
			},
			// 选择器 关闭
			provinceCancel() {
				this.provinceShow = false
			},
			// 选择器确定
			provinceConfirm(e) {
				this.formData.vehColor = e.value[0].id
				this.vehColor = e.value[0].name
				this.provinceShow = false
			},


		}
	}
</script>

<style lang="scss">
	.viewCon {
		padding: 30rpx;

		.inputView {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.text_label {
				width: 180rpx;
				text-align: center;
				display: inline-block;
			}

			.iptview {
				flex: 1;
			}
		}

		.btn {
			width: 400rpx;
			height: 80rpx;
			background-color: #148AE4;
			margin: 0 auto;
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			text {
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
</style>